<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
    <script src="jquery-3.3.1.js"></script>
    <script src="common.js"></script>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">layui 后台布局</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="check" href="javascript:;">查看所有车辆信息</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <table class="layui-hide" id="test" lay-filter="test"></table>

                <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm addStudent " lay-event="add">新增车辆</button>
                </div>
            </script>

                <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">取车</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
                <script type="text/html" id="indexTpl">
                {{d.LAY_TABLE_INDEX+1}}</script>
            </div>
        </div>


        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>
    <form class="layui-form " lay-filter="layuiadmin-form-useradmin" id="carForm"
        style="padding: 20px 0 0 0;display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">车牌</label>
            <div class="layui-input-inline">
                <input type="text" name="park_id" lay-verify="carId|required" placeholder="请输入车牌" autocomplete="off"
                    class="layui-input id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车主姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="park_name" lay-verify="username|required" placeholder="请输入车主姓名"
                    autocomplete="off" class="layui-input username">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车主手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="park_tel" lay-verify="phone|required" placeholder="请输入车主手机号" autocomplete="off"
                    class="layui-input phone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车辆类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="park_type" value="1" title="公司用车">
                <input type="radio" name="park_type" value="2" title="员工用车">
                <input type="radio" name="park_type" value="3" title="社会车辆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">停车时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" id="park_start">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">取车时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="park_end">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit lay-filter="submit" id="okBtn" style="margin-left: 50%;">
                确认
            </button>
            <button type="button" class="layui-btn layui-btn-danger" lay-filter="cancel" id="cancelBtn"
                style="margin-left: 10px;">取消
            </button>
        </div>
    </form>


    <form class="layui-form " lay-filter="layuiadmin-form-useradmin" id="carForm2"
        style="padding: 20px 0 0 0;display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">取车时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="time" lay-verify="required" id="test3">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit lay-filter="submit" id="ok" style="margin-left: 50%;">
                确认
            </button>
            <button type="button" class="layui-btn layui-btn-danger" lay-filter="cancel" id="cancel"
                style="margin-left: 10px;">取消
            </button>
        </div>
    </form>

</body>

<script>
    layui.use(['table', "form", "layer", "laydate"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;

        var params1;
        var params2;
        var params3;
        laydate.render({
            elem: '#park_start', //指定元素
            type: 'datetime',
            done: function (value, date, endDate) {
                params1 = value;
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
        laydate.render({
            elem: '#park_end', //指定元素
            type: 'datetime',
            done: function (value, date, endDate) {
                params2 = value;
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
        laydate.render({
            elem: '#test3', //指定元素
            type: 'datetime',
            done: function (value, date, endDate) {
                params3 = value;
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }

        });


        //第一个实例
        $(".check").on("click", function check() {
            var tables = table.render({
                elem: '#test',
                toolbar: '#toolbarDemo'
                , url: serverPath + "/carInfos" //数据接口
                ,page: true
                ,limits: [3,5,10]  //一页选择显示3,5或10条数据
                ,limit: 10  //一页显示10条数据
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    console.log(this);
                    console.log(JSON.stringify(res));
                    if(this.page.curr){
                        result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else{
                        result=res.data.slice(0,this.limit);
                    }
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                }
                , id: "all"
                , cellMinWidth: 80
                , cols: [[ //表头
                    { field: 'id', title: '序号', templet: '#indexTpl', fixed: 'left' }
                    , { field: 'park_id', title: '车牌' }
                    , { field: 'park_name', title: '车主姓名' }
                    , { field: 'park_tel', title: '联系方式' }
                    , {
                        field: 'park_type', title: '车辆类型',
                        templet: function (data) {
                            // console.log(data)
                            if (data.park_type == 1) {
                                return "公司用车"
                            } else if (data.park_type == 2) {
                                return "员工用车"
                            } else {
                                return "社会车辆"
                            }
                        }
                    }
                    , { field: 'park_start', title: '开始时间' }
                    , {
                        field: 'park_end', title: '结束时间'
                    }
                    , { field: 'park_money', title: '停车费用(￥)' }
                    , {
                        field: 'park_status', title: '车辆状态', templet: function (data) {
                            console.log(data)
                            if (data.park_status == 1) {
                                return "已取车"
                            } else {
                                return "未取车"
                            }
                        }
                    }, {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#barDemo',
                    }
                ]]
            });

            //新增车辆
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        var index = layer.open({
                            type: 1,
                            title: '添加车辆',
                            content: $("#carForm"),
                            maxmin: true,
                            area: ['500px', '550px'],
                            success: function (layero, index) {
                                form.render()
                                form.on("submit(submit)", function (data) {
                                    var date = params1;
                                    console.log(date);
                                    console.log(data.field);
                                    // // console.log(JSON.stringify(data.field));
                                    var needData = {
                                        carInfo: data.field,
                                        date: date
                                    }
                                    console.log(JSON.stringify(needData));
                                    $.ajax({
                                        type: "put",
                                        url: serverPath + "/carInfos",
                                        contentType: "application/json;charset=UTF-8",
                                        data: JSON.stringify(needData),
                                        success: function (res) {
                                            layer.alert("新增车辆信息成功！")
                                            $("#carForm")[0].reset();
                                            table.reload("all");
                                            layer.close(index);
                                        }

                                    })

                                })
                                //额外的自定义车牌校验
                                form.verify({
                                    carId: function (value, item) { //value：表单的值、item：表单的DOM对象
                                        if (!new RegExp("^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$").test(value)) {
                                            return '车牌有误';
                                        }

                                    }
                                });
                            }
                        });

                        $("#cancelBtn").on("click", function () {
                            layer.close(index);
                        })
                        break;
                }
            });
            //监听行工具事件 删除和编辑
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                console.log(data)
                if (obj.event === 'del') {
                    layer.confirm('确定删除吗？', function (index) {
                        obj.del();
                        $.ajax({
                            type: "DELETE",
                            url: serverPath + "/carInfos/" + data.id,
                            success: function (res) {
                                layer.alert("删除成功！")
                            }
                        })
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    form.render()
                    var index = layer.open({
                        type: 1,
                        title: '车辆信息',
                        content: $("#carForm2"),
                        maxmin: true,
                        area: ['500px', '350px'],
                        success: function (layero, index) {
                            form.on("submit(submit)", function () {
                                var date = params3
                                console.log(JSON.stringify(date));
                                var need = {
                                    id: data.id,
                                    date: date
                                }
                                console.log(JSON.stringify(need));
                                $.ajax({
                                    type: "post",
                                    url: serverPath + "/carInfos",
                                    contentType: "application/json;charset=UTF-8",
                                    data: JSON.stringify(need),
                                    success: function (res) {
                                        layer.alert("取车成功！")
                                        table.reload("all");
                                    }
                                })
                                layer.close(index);
                            })
                            $("#cancelBtn").on("click", function () {
                                layer.close(index);
                            })
                        }
                    });
                }
            });

        });
    });
</script>

</html>